<!--
 * @Author: actor
 * @Date: 2023-11-27 11:39:44
 * @email: 395593455@qq.com
 * @LastEditors: actor
 * @LastEditTime: 2023-12-19 10:15:34
 * @FilePath: \i-hos-app\shared\emr\src\components\common\serachForm.vue
 * @Description: 搜索form
-->
<template>
  <el-form>
    <template v-for="item in props.serachKey">
      <el-form-item v-if="item.list" :label="item.label">
        <el-tree-select v-model="item.value" :data="item.list" filterable />
        <!-- <el-select :placeholder="item.label" v-model="item.value">
          <el-option v-for="(obj, index) in item.list" :label="obj.label" :value="obj.value" :key="index" />
        </el-select> -->
      </el-form-item>
      <el-form-item v-else :label="item.label">
        <el-input :placeholder="item.label" v-model="item.value" />
      </el-form-item>
    </template>
    <el-form-item>
      <div v-if="!useSlot.default">
        <el-button type="primary" @click="serach">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
      <!-- 以插槽的方式自定义按钮组 -->
      <slot v-else></slot>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
  import { useSlots } from 'vue'
  import { ISerachKey } from '../../interface/pageShare'

  // 接收父组件值
  const props = defineProps({
    serachKey: {
      type: Array<ISerachKey>,
      default: [],
    },
  })
  let useSlot = useSlots()
  // 更新父组件方法
  let $emit = defineEmits<{
    (e: 'updateSerach', flag?: String): void
  }>()
  // 搜索
  const serach = () => {
    $emit('updateSerach')
  }
  // 重置
  const reset = () => {
    $emit('updateSerach', 'reset')
  }
</script>

<style scoped lang="scss">
  .el-form {
    display: flex;
    .el-form-item {
      margin-right: 15px;
      .el-form-item__content {
        flex-wrap: nowrap;
      }
    }
  }
</style>
